{% extends "base.html" %}
{% block content %}
    <style>
        body {
            background: linear-gradient(135deg, #ffafbd, #ffc3a0);
        }
        .chart-container {
            display: flex;
            flex-direction: column; /* 列方向布局 */
            align-items: center; /* 水平居中 */
            margin: 20px;
        }
        .pie-charts {
            display: flex; /* 行方向布局 */
            justify-content: space-between; /* 使两图之间尽可能多的空间 */
            align-items: center; /* 垂直居中 */
            width: 80%; /* 设置整体宽度 */
            margin-top: 20px; /* 在顶部增加间距 */
        }
        .chart-title {
            color: #000;
            font-size: 24px;
            font-weight: bold;
            margin: 10px 0;
        }
    </style>

    <div class="chart-container">
        <div id="salary" style="width: 80%; height: 400px;"></div>

        <div class="pie-charts">
            <div id="xueli" style="width: 45%; height: 400px;"></div>
            <div id="jinyan" style="width: 45%; height: 400px;"></div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            // 工资分布柱状图
            Highcharts.chart('salary', {
                chart: {
                    type: 'column',
                    backgroundColor: 'rgba(0,0,0,0)'
                },
                title: {
                    text: '工资分布图',
                    style: { color: '#000', fontSize: '43.5px', fontWeight: 'bold' }
                },
                xAxis: {
                    categories: ['0~5k', '5~8k', '8k~11k', '11k~14k', '14k~17k', '17k~20k', '20k~23k', '23K以上'],
                    title: { text: null },
                    labels: { style: { fontSize: '18px' } } // X轴字体
                },
                yAxis: {
                    min: 0,
                    title: { text: '岗位数', style: { fontSize: '18px' } }, // Y轴标题字体
                    allowDecimals: false,
                    labels: { style: { fontSize: '18px' } } // Y轴数字字体
                },
                tooltip: {
                    headerFormat: '<span style="font-size:15px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                 '<td style="padding:0"><b>{point.y:.1f} 个</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                series: [{
                    name: '岗位数',
                    data: {{ xz | tojson }} // 传入工资数据
                }],
                credits: { enabled: false }
            });

            // 学历占比饼图
            var xueliData = {{ xl | tojson }};
            var xueliSeries = xueliData.map(function(item) {
                return { name: item[0], y: item[1] };
            });

            Highcharts.chart('xueli', {
                chart: { type: 'pie', backgroundColor: 'rgba(0,0,0,0)' },
                title: { text: '学历占比情况', style: { color: '#000', fontSize: '36px', fontWeight: 'bold' } }, // 1.5倍字体
                tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: { enabled: true, style: { fontSize: '18px' } }, // 饼图数据标签字体
                        showInLegend: true
                    }
                },
                series: [{ name: '学历', data: xueliSeries }],
                credits: { enabled: false }
            });

            // 工作年限要求饼图
            var jinyanData = {{ jy | tojson }};
            var jinyanSeries = jinyanData.map(function(item) {
                return { name: item[0], y: item[1] };
            });

            Highcharts.chart('jinyan', {
                chart: { type: 'pie', backgroundColor: 'rgba(0,0,0,0)' },
                title: { text: '工作年限要求', style: { color: '#000', fontSize: '36px', fontWeight: 'bold' } },
                tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: { enabled: true, style: { fontSize: '18px' } }, // 饼图数据标签字体
                        showInLegend: true
                    }
                },
                series: [{ name: '工作年限', data: jinyanSeries }],
                credits: { enabled: false }
            });
        });
    </script>

{% endblock %}
